<template>
  <div>

    {{ RealInfo }}



    <div class="real-view">

      <div class="real-options">
        <div class="real-options-left"></div>
        <div class="real-options-right">
          <el-button size="mini" type="primary">认证历史</el-button>
          <el-button size="mini" type="primary" icon="el-icon-plus">开始认证</el-button>
        </div>

      </div>

    </div>

    <!-- 未实名 -->
    <div class="real-empty">

      <!-- 成功图标 -->
      <i class="overall-icon icon-renzheng real-status-icon origin-text"></i>

      <p class="real-text origin-text">用户未实名</p>

    </div>
    <!-- 已实名 -->
    <div class="real-success">

      <!-- 成功图标 -->
      <i class="overall-icon icon-renzheng real-status-icon real-status-icon-sucess green-text"></i>

      <p class="real-text green-text">恭喜，认证成功</p>

      <div class="real-info user-info-list">

        <div class="user-info-list-li">
          <span class="list-left">真实姓名</span>
          <span class="list-right">王嘉豪</span>
        </div>
        <div class="user-info-list-li">
          <span class="list-left">身份证</span>
          <span class="list-right">44138119990322731X</span>
        </div>

        <div class="user-info-list-li">
          <span class="list-left">实名时间</span>
          <span class="list-right">14点59分</span>
        </div>
        <div class="user-info-list-li">
          <span class="list-left">通过时间</span>
          <span class="list-right">14点59分</span>
        </div>

        <div class="user-info-list-li">
          <span class="list-left">审核人</span>
          <span class="list-right blue-text">管理员</span>
        </div>
      </div>

      <div class="real-info-options">
        <span class="list-left blue-text">修改认证信息</span>
        <span class="list-left red-text">注销认证</span>
      </div>

    </div>
    <!-- 审核 -->
    <div class="real-waiting">

      <!-- 成功图标 -->
      <i class="overall-icon icon-renzheng real-status-icon origin-text"></i>

      <p class="real-text origin-text">提交完成,等待审核</p>

      <div class="real-info user-info-list">
        <div class="user-info-list-li">
          <span class="list-left">真实姓名</span>
          <span class="list-right">王嘉豪</span>
        </div>
        <div class="user-info-list-li">
          <span class="list-left">身份证</span>
          <span class="list-right">44138119990322731X</span>
        </div>
        <div class="user-info-list-li">
          <span class="list-left">实名时间</span>
          <span class="list-right">14点59分</span>
        </div>
      </div>

      <div class="real-info-options">
        <span class="list-left blue-text">审核通过</span>
        <span class="list-left red-text">拒绝审核</span>
      </div>

    </div>
  </div>
</template>

<script setup>
import API from '@/api'
import { ref,reactive, onBeforeMount } from 'vue'
import { useRoute, useRouter, onBeforeRouteUpdate ,onBeforeRouteLeave} from "vue-router";
const VueRoute = useRoute();
const PageQuery = ref(null)

const RealInfo = ref({})

onBeforeMount(() => {
  let Route = VueRoute
  let Query = Route.query
  PageQuery.value = Query
  GetRealInfo()
})
function GetRealInfo(user) {
  API.Manage.realInfo({ user: 15 })
    .then(res => {
      console.log("GetRealInfo res");
      console.log(res);

      RealInfo.value = res

    }).catch(err => {
      console.log("GetRealInfo err");
      console.log(err);
    })
}
</script>

<style lang="scss" scoped>
.real-content {
  background: white;
  height: 100%;
}

.blue-text {
  color: #409eff;
}

.red-text {
  color: #f56c6c;
}

.green-text {
  color: #67c23a;
}

// 橙色
.origin-text {
  color: #e6a23c;
}


.real-view {
  flex: 1;
  background-color: white;
}

.user-info-list {

  display: flex;
  flex-direction: column;
  padding-top: 10px;
  margin-bottom: 10px;

  .user-info-list-li {
    $height: 30px;
    display: flex;
    height: $height;
    font-size: .8rem;

    .list-left {
      width: 25%;
      line-height: $height;
      text-align: right;
      margin-right: 15px;
    }

    .list-right {
      flex: 1;
      line-height: $height;
    }
  }
}

.real-options {
  background: white;
  display: flex;
  height: 60px;
}

.real-options-left {
  flex: 1
}

.real-options-right {
  display: flex;
  align-items: center;
  padding-right: 10px;
}

.real-status-icon {
  font-size: 4rem;
  margin-bottom: 10px;
}

.real-status-icon-sucess {
  color: green;
}

// 认证状态文本样式
.real-text {
  font-size: 14px;
  margin-left: 10px;

}

.real-empty,
.real-success,
.real-waiting {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: white;
}

// 认证成功样式
.real-success {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: white;
}

.real-info,
.real-info-options {
  width: 300px;
}

.real-info {
  margin-top: 20px;
  border-radius: 8px;
  background-color: #f5eded54;
  padding-bottom: 10px;
}

.real-info-options {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 30px;
}
</style>
